import React from 'react';
import { Input, InputNumber } from 'antd';
import './IntegrationArticle.less';

const IntegrationArticle = (props) => (
  <div className="integration-article">
    <div className="integration-articl-item">
      <span className="mr10">Stay on page between</span>
      <span className="mr10">
        <Input
          className="w80"
          addonAfter={<span>Sec</span>}
          value={props.firstArticleFrom}
          onChange={props.firstArticleFromOnChange} />
      </span>
      <span className="mr10">to</span>
      <span className="mr10">
        <Input
          className="w80"
          addonAfter={<span>Sec</span>}
          value={props.secondArticleFrom}
          onChange={props.secondArticleFromOnChange} />
      </span>
      <span className="mr10">Could obtain</span>
      <span>
        <InputNumber
          className="w132"
          placeholder="Integral"
          precision={0}
          min={0}
          max={100}
          value={props.firstArticleIntegral}
          onChange={props.firstArticleIntegralOnChange} />
      </span>
    </div>
    <div className="integration-articl-item">
      <span className="mr10">Stay on page between</span>
      <span className="mr10">
        <Input
          className="w80"
          addonAfter={<span>Sec</span>}
          value={props.secondArticleFrom}
          onChange={props.secondArticleFromOnChange} />
      </span>
      <span className="mr10">to</span>
      <span className="mr10">
        <Input
          className="w80"
          addonAfter={<span>Sec</span>}
          value={props.secondArticleTo}
          onChange={props.secondArticleToOnChange} />
      </span>
      <span className="mr10">Could obtain</span>
      <span>
        <InputNumber
          className="w132"
          placeholder="Integral"
          precision={0}
          min={0}
          max={100}
          value={props.secondArticleIntegral}
          onChange={props.secondArticleIntegralOnChange} />
      </span>
    </div>
    <div className="integration-articl-item">
      <span className="mr10">Stay on page between</span>
      <span className="mr10">
        <Input
          className="w80"
          addonAfter={<span>Min</span>}
          value={props.thirdArticleFrom/60}
          onChange={props.thirdArticleFromOnChange} />
      </span>
      <span className="mr10">Could obtain</span>
      <span>
        <InputNumber
          className="w132"
          placeholder="Integral"
          precision={0}
          min={0}
          max={100}
          value={props.thirdArticleIntegral}
          onChange={props.thirdArticleIntegralOnChange}  />
      </span>
    </div>
  </div>
)

export default IntegrationArticle;
